$headSize: 60px; // 顶部操作栏高度
$menuSize: 275px; // 菜单列表的宽度
$operatorSize: 275px; // 右侧编辑详情宽度

$ibc: #dcdfe6; // border color 边框颜色
$ibl: #ebeef5; // border color light 边框颜色，轻
$itc: #314659; // text color 字体颜色
$icc: rgba(0, 0, 0, 0.45); // icon color 图表颜色
$boxShadownCOlor: #f0f1f2; // 阴影颜色

$primary: #409eff; // 主色调

.visual-editor {
    position: fixed;
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background-color: #fff;
    &::before {
        content: "";
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba($color: black, $alpha: 0.1);
    }

    & > .visual-editor-menu {
        position: absolute;
        width: $menuSize;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: #fff;
        z-index: 10;

        .visual-editor-menu-item {
            position: relative;
            width: calc(100% - 20px);
            margin-left: 10px;
            margin-top: 20px;
            min-height: 120px;
            border: 3px solid $ibl;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 20px;
            box-sizing: border-box;

            &::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 20;
            }
            &:hover {
                border-color: $primary;
                cursor: move;
            }
        }
        .visual-editor-menu-item-label {
            position: absolute;
            top: -3px;
            left: -3px;
            background-color: $primary;
            color: #fff;
            padding: 4px 8px;
            font-size: 12px;
            z-index: 1;
        }
    }

    & > .visual-editor-head {
        position: absolute;
        height: $headSize;
        top: 0;
        left: $menuSize;
        right: $operatorSize;
        // background-color: #409eff;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 10px;

        .visual-editor-head-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.3);
            color: #fff;
            height: 60px;
            width: 60px;
            cursor: pointer;
            transition: all 300ms linear;

            & + .visual-editor-head-button {
                margin-left: 1px;
            }

            &:first-child {
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
            }
            &:last-child {
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
            }
            &:hover {
                background-color: #fff;
                color: $primary;
            }

            span {
                font-size: 12px;
            }
        }
    }
    & > .visual-editor-operator {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: $operatorSize;
        background-color: #fff;
        z-index: 10;
    }
    & > .visual-editor-body {
        position: relative;
        padding-top: $headSize + 20;
        padding-left: $menuSize;
        padding-right: $operatorSize;
        height: 100%;
        box-sizing: border-box;
        background-color: rgba(white, 0.5);
        z-index: 1;

        & > .visual-editor-content {
            width: 100%;
            height: 100%;
            overflow: auto;
            display: flex;
            justify-content: center;

            & > .visual-editor-container {
                background-color: #fff;
                flex-shrink: 0;
                flex-grow: 0;
                position: relative;

                .visual-editor-block {
                    position: absolute;
                    &::after {
                        content: "";
                        $space: 3px;
                        position: absolute;
                        top: -$space;
                        left: -$space;
                        right: -$space;
                        bottom: -$space;
                        z-index: 20;
                    }
                    // 组件选中样式
                    &.visual-editor-block-focus {
                        &::after {
                            border: 1px dotted $primary;
                        }
                    }
                }
            }
        }
    }
}
